<template>
   <div>
       <!-- 背景封面 -->
       <div class="image flex">
          <img :src="PlayNow.picurl" :style="getStyle">
       </div>
       <!-- 功能 -->
       <!-- <div class="fun flex">
            <button   v-for="item in FunData" :key="item.id"  :class="state == item.id ? 'active' : '' "  @click="select(item.id)">
                    {{item.label}}
            </button>
        </div> -->

        <!-- 进度 -->
        <div class="ProgressBox flex">
             <div>{{star| SongLength}}</div>
              <!-- <div class="Progress flex" >
                <div class="played" :style="getProgress"></div>
                <div class="point"></div>
              </div> -->
              <el-slider v-model="percent" :show-tooltip="false" class="Progress" @change="changeProgress(percent)" ></el-slider>
             <div>{{PlayNow.end | SongLength}}</div>
        </div>
       

   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'',
     data() {
        return {
            state:1,
            star:0,
            percent:0,
            ProgressState:true,
            FunData:[
                {id:1,label:'封面'},
                {id:2,label:'歌词'}
            ]
        }
     },
     computed:{
        ...mapState('Music',['PlayNow','Player']),
        getStyle(){
            if( this.Player && this.Player.isPlay == 1) {return {animation:'rotate 5s linear infinite'}}
            else return {animation:null}
        },
     },
     methods:{
        ...mapMutations('Music',['CHANGEPROFRESS','CONTINUE','PAUSE']),
         select(id){
            this.state=id
        },
       
        changeProgress(percent){
            let time = parseInt(this.PlayNow.end * percent / 100 / 1000)
            this.PAUSE()
            this.CHANGEPROFRESS(time)
            this.CONTINUE()
            this.ProgressState=true
        }
     },
     watch:{
        PlayNow:{
            immediate:true,
            deep:true,
            handler(newValue){
                this.star =newValue.star
                if(this.ProgressState)
                this.percent=parseInt(this.star / this.PlayNow.end * 100)
            }
        }
     }
  }
</script>
<style scoped lang='less'>
::v-deep  .el-slider__button-wrapper{
    z-index: 100 !important;
}
::v-deep .el-slider__bar{
    background: var(--GeneralBackColor);
}
::v-deep .el-tooltip.el-slider__button{
      border: 2px solid var(--GeneralBackColor);
}
@keyframes rotate {
    from{
        transform: rotate(0 deg);
    }
    to{
        transform: rotate(360 deg);
    }
}
// 背景图
.image{
    width: 300px;
    height:300px;
    background: black;
    border-radius: 50%;

    img{
        width: 80%;
        height: 80%;
        border-radius: 50%;   
    }
}
// 功能
.fun{
    position: absolute;
    right: 50px;
    top: 50px;
    border: 1px solid white;

    button{
        color: white;
        font-size: 18px;
        padding: 2px;
    }
    .active{
        background: var(--GeneralBackColor);
    }
}
//进度条
.ProgressBox{
    width: 80%;
    min-width: 300px;
    flex-wrap: nowrap;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
}
.Progress{
    width: 100%;
    // height: 5px;
    // background: white;
    // border-radius: 5px;
    margin: 0 10px;
    // overflow: hidden;
    justify-content: flex-start;
    flex-wrap: nowrap;

    .played{
        height: 100%;
        background: var(--GeneralBackColor);
         border-radius: 5px;
    }
    .point{
   
         width: 15px;height: 15px;
         background: var(--GeneralBackColor);
         border-radius: 50%;
    }
}
</style>